<template>
  <div ref="bottomBtn" class="bottomBtn">
    <el-button size="mini" type="primary" plain class="selectall" @click="toggleSelection(list,1)">全选</el-button>
    <!-- <el-button size="mini" type="primary" plain class="selectall">确认挑选</el-button>  -->
    <el-button size="mini" type="primary" plain class="selectall">进购商品</el-button>
    <span v-if="isshow">
      <el-button size="mini" type="primary" plain class="selectall">有货</el-button>
      <el-button size="mini" type="primary" plain class="selectall">无货</el-button>
      <el-button size="mini" type="primary" plain class="selectall">批量删除</el-button>
      <el-button size="mini" type="primary" plain class="selectall">批量上架</el-button>
      <el-button size="mini" type="primary" plain class="selectall">批量修改会员价</el-button>
      <el-button size="mini" type="primary" plain class="selectall" @click="toggleSelection(list,2)">取消</el-button>
    </span>
    <el-dropdown>
      <el-button type="primary">
        更多菜单<i class="el-icon-arrow-down el-icon--right" />
      </el-button>
      <el-dropdown-menu slot="dropdown">
           <el-button size="mini" type="primary" plain class="selectall">有货</el-button>
      <el-button size="mini" type="primary" plain class="selectall">无货</el-button>
      <el-button size="mini" type="primary" plain class="selectall">批量删除</el-button>
      <el-button size="mini" type="primary" plain class="selectall">批量上架</el-button>
      <el-button size="mini" type="primary" plain class="selectall">批量修改会员价</el-button>
      <el-button size="mini" type="primary" plain class="selectall" @click="toggleSelection(list,2)">取消</el-button>
      </el-dropdown-menu>
    </el-dropdown>
    <slot />
  </div>
</template>
<script>
export default {
  props: ['list'],
  data() {
    return {
      isshow: true,
      screenWidth: document.body.clientWidth
    }
  },
  watch: {
    // screenWidth(val) {
    //   this.screenWidth = val
    //   if (this.screenWidth <= 1700) {
    //     this.isshow = false
    //   } else {
    //     this.isshow = true
    //   }
    // }
  },
  mounted() {
    const that = this
    that.screenWidth = this.$refs.bottomBtn.offsetWidth
    if (this.screenWidth <= 1600) {
      this.isshow = false
    } else {
      this.isshow = true
    }
    window.onresize = () => {
      return (() => {
        // that.screenWidth = this.$refs.bottomBtn.offsetWidth
        console.log('that', document.body.clientWidth)
        // console.log('bodyHightMut', document.body.clientHeight)
        if (this.screenWidth <= 950) {
          this.isshow = false
        } else {
          this.isshow = true
        }
        console.log('bottomBtn', this.$refs.bottomBtn.offsetWidth)
      })()
    }
  },
  methods: {
    toggleSelection(rows, type) {
      var that = this
      if (type == 1) {
        console.log(rows)
        console.log(that, 'this.$refs.multipleTable')
        rows.forEach(row => {
          this.$parent.$refs.multipleTable.toggleRowSelection(row)
          if(row['children']){
              this.toggleSelection(row['children'])
              console.log(row['children'])
          }
          // 循环两次 对比  相等时候勾选
        })
      } else if (type == 2) {
        this.$refs.multipleTable.clearSelection()
      }
    }
  }
}
</script>
<style scoped>
.bottomBtn{
    width: 60%;
}
.el-button+.el-button{
  margin-left: 0;
}
</style>
